<template>
    <div class="chat-detail">
        <template v-if="wxFriendInfo && wxFriendInfo.friend_wechatno !== undefined">
            <detail-header :wxInfoData="wxFriendInfo"></detail-header>
        </template>
        <Tabs
            name="a"
            @on-click="handleSelectPatient"
            v-if="patientList && patientList.length"
            class="patient-tab"
            type="card"
        >
            <TabPane tab="a" v-for="item in patientList" :key="item.id" :label="item.user_name ? item.user_name : '未知'">
                <detail-info :info="info"></detail-info>
                <detail-history ref="detailHistory" :currentIndex="currentIndex"></detail-history>
            </TabPane>
        </Tabs>
        <div v-if="wxFriendInfo && !patientList.length" class="empty-button">
            <Button @click="handleAddPatient" type="primary">新增患者</Button>
        </div>
        <wechataddPatient ref="wechataddPatient"></wechataddPatient>
    </div>
</template>

<script>
import DetailHeader from '../detail-components/header.vue';
import DetailInfo from '../detail-components/info.vue';
import DetailHistory from '../detail-components/history.vue';
import { mapMutations, mapState } from 'vuex';
import { patientindexinfo } from '@/api/hqapi';
import Template from '../../../../components/search/template.vue';
import wechataddPatient from '@/components/wechataddPatient';
export default {
    data() {
        return {
            info: {},
            currentIndex: 0
        };
    },
    components: {
        DetailHeader,
        DetailInfo,
        DetailHistory,
        Template,
        wechataddPatient
    },
    computed: {
        ...mapState('chatwebsocket/wechat', ['patientList', 'wxFriendInfo'])
    },
    watch: {
        patientList: function(val) {
            if (val.length) {
                this.getPatientIndexInfo(val[this.currentIndex].id);
            }
        }
    },
    mounted () {
        // 解决切换路由加载进来之后，info数据为空的问题
        if (this.patientList.length > 0) {
            this.getPatientIndexInfo(this.patientList[0].id)
        }
    },
    methods: {
        ...mapMutations('chatwebsocket/wechat', ['setPatientInfo']),
        getPatientIndexInfo(id) {
            patientindexinfo({
                id
            }).then(res => {
                this.info = res;
                this.setPatientInfo(res);
            });
        },
        /**
         * 新增患者
         * TODO: //
         */
        handleAddPatient() {
            this.$refs.wechataddPatient.initial();
            console.log('handleAddPatient');
        },
        /**
         * 切换患者
         */
        handleSelectPatient(e) {
            // console.log('e', e);
            this.currentIndex = e;
            this.$nextTick(() => {
                this.$refs['detailHistory'][e].getRetrunVisit();
                this.getPatientIndexInfo(this.patientList[e].id);
            });
        }
    }
};
</script>

<style lang="less" scoped>
.chat-detail {
    padding: 10px;
    box-sizing: border-box;
}

.patient-tab {
    margin-top: 10px;
}
.empty-button {
    display: flex;
    height: 300px;
    width: 100%;
    justify-content: center;
    align-items: center;
}
</style>
